<template>
  <div>
    <el-button @click="getData()">获取数据</el-button>
    <el-button @click="formVisible = true">修改</el-button>

    <p>数据</p>
    <p>养殖类型：{{ formData.breed_type }}</p>
    <p>不提交字段：{{ formData.no_submit_key }}</p>

    <c-form-dialog
      :form-items="formItems"
      :form-data="formData"
      :table-name="tableName"
      :table-id="tableId"
      label-width="120px"
      @success="getData"
      :before-save="beforeSave"
      :visible.sync="formVisible"
    ></c-form-dialog>

    <section class="mb-3">
      <h5>select by options</h5>
      <c-cascader
        v-model="selectValue"
        :options="selectOptions"
        @change="handleChangeOptions"
      ></c-cascader>
      <span>{{ JSON.stringify(selectValue) }}</span>
    </section>

    <section class="mb-3">
      <h5>select by store</h5>
      <c-cascader
        v-model="selectProduct"
        :options="productCategoryTree"
        :props="{ value: 'id', label: 'category_name' }"
        @change="handleChangeProduct"
      ></c-cascader>
      <span>{{ JSON.stringify(selectProduct) }}</span>
      <el-button @click="selectProduct = ['100100000000', '100102000000']">init</el-button>
    </section>

    <section class="mb-3">
      <h5>select by lazyload</h5>
      <c-cascader
        v-model="selectLazy"
        :props="selectLazyProps"
        @change="handleChangeLazy"
        ref="lazyCascader"
      ></c-cascader>
      <span>{{ JSON.stringify(selectLazy) }}</span>
      <el-button @click="handleLazy">init</el-button>
    </section>

    <section class="mb-3">
      <h5>select-product-cates</h5>
      <select-product-cates
        ref="product"
        v-model="product"
        @select="handleSelect"
      ></select-product-cates>
      <span>{{ product }}</span>
      <span>{{ JSON.stringify(productLabels) }}</span>
      <el-button @click="handleProductChange">init</el-button>
    </section>
  </div>
</template>
<script>
import SelectProductCates from '@/credit/components/select/SelectProductCates'

export default {
  components: { SelectProductCates },
  props: {},
  data() {
    return {
      tableName: 'chick_house_standard',
      tableId: '',
      formVisible: false,
      formData: {},
      formItems: [
        {
          tag: 'radio-group',
          itemAttrs: { label: '养殖类型' },
          attrs: {
            key: 'breed_type',
            value: 1,
            options: [
              { value: 0, label: '标准' },
              { value: 1, label: '林下' },
            ],
          },
        },
        {
          tag: 'input',
          itemAttrs: { label: '不提交字段' },
          attrs: {
            key: 'no_submit_key',
            value: 'init value',
          },
          ifDrop: true,
        },
      ],

      selectValue: [],
      selectOptions: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致',
                },
                {
                  value: 'fankui',
                  label: '反馈',
                },
                {
                  value: 'xiaolv',
                  label: '效率',
                },
                {
                  value: 'kekong',
                  label: '可控',
                },
              ],
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航',
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航',
                },
              ],
            },
          ],
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                {
                  value: 'layout',
                  label: 'Layout 布局',
                },
                {
                  value: 'color',
                  label: 'Color 色彩',
                },
                {
                  value: 'typography',
                  label: 'Typography 字体',
                },
                {
                  value: 'icon',
                  label: 'Icon 图标',
                },
                {
                  value: 'button',
                  label: 'Button 按钮',
                },
              ],
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                {
                  value: 'radio',
                  label: 'Radio 单选框',
                },
                {
                  value: 'checkbox',
                  label: 'Checkbox 多选框',
                },
                {
                  value: 'input',
                  label: 'Input 输入框',
                },
                {
                  value: 'input-number',
                  label: 'InputNumber 计数器',
                },
                {
                  value: 'select',
                  label: 'Select 选择器',
                },
                {
                  value: 'cascader',
                  label: 'Cascader 级联选择器',
                },
                {
                  value: 'switch',
                  label: 'Switch 开关',
                },
                {
                  value: 'slider',
                  label: 'Slider 滑块',
                },
                {
                  value: 'time-picker',
                  label: 'TimePicker 时间选择器',
                },
                {
                  value: 'date-picker',
                  label: 'DatePicker 日期选择器',
                },
                {
                  value: 'datetime-picker',
                  label: 'DateTimePicker 日期时间选择器',
                },
                {
                  value: 'upload',
                  label: 'Upload 上传',
                },
                {
                  value: 'rate',
                  label: 'Rate 评分',
                },
                {
                  value: 'form',
                  label: 'Form 表单',
                },
              ],
            },
            {
              value: 'data',
              label: 'Data',
              children: [
                {
                  value: 'table',
                  label: 'Table 表格',
                },
                {
                  value: 'tag',
                  label: 'Tag 标签',
                },
                {
                  value: 'progress',
                  label: 'Progress 进度条',
                },
                {
                  value: 'tree',
                  label: 'Tree 树形控件',
                },
                {
                  value: 'pagination',
                  label: 'Pagination 分页',
                },
                {
                  value: 'badge',
                  label: 'Badge 标记',
                },
              ],
            },
            {
              value: 'notice',
              label: 'Notice',
              children: [
                {
                  value: 'alert',
                  label: 'Alert 警告',
                },
                {
                  value: 'loading',
                  label: 'Loading 加载',
                },
                {
                  value: 'message',
                  label: 'Message 消息提示',
                },
                {
                  value: 'message-box',
                  label: 'MessageBox 弹框',
                },
                {
                  value: 'notification',
                  label: 'Notification 通知',
                },
              ],
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'menu',
                  label: 'NavMenu 导航菜单',
                },
                {
                  value: 'tabs',
                  label: 'Tabs 标签页',
                },
                {
                  value: 'breadcrumb',
                  label: 'Breadcrumb 面包屑',
                },
                {
                  value: 'dropdown',
                  label: 'Dropdown 下拉菜单',
                },
                {
                  value: 'steps',
                  label: 'Steps 步骤条',
                },
              ],
            },
            {
              value: 'others',
              label: 'Others',
              children: [
                {
                  value: 'dialog',
                  label: 'Dialog 对话框',
                },
                {
                  value: 'tooltip',
                  label: 'Tooltip 文字提示',
                },
                {
                  value: 'popover',
                  label: 'Popover 弹出框',
                },
                {
                  value: 'card',
                  label: 'Card 卡片',
                },
                {
                  value: 'carousel',
                  label: 'Carousel 走马灯',
                },
                {
                  value: 'collapse',
                  label: 'Collapse 折叠面板',
                },
              ],
            },
          ],
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components',
            },
            {
              value: 'sketch',
              label: 'Sketch Templates',
            },
            {
              value: 'jiaohu',
              label: '组件交互文档',
            },
          ],
        },
      ],

      selectProduct: [],

      selectLazy: ['100400000000', '100401000000'],
      selectLazyProps: {
        value: 'id',
        label: 'categoryName',
        lazy: true,
        lazyLoad: this.lazyLoad,
      },

      product: '100101001000',
      productLabels: ['蔬菜基地', '白菜', '上海青'],
    }
  },
  computed: {
    productCategoryTree() {
      return this.$store.getters.productCategoryTree
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.$store.dispatch('getProductCategory')
    this.getData()
  },
  methods: {
    getData() {
      setTimeout(() => {
        this.formData = {
          breed_type: Math.random() > 0.5 ? 1 : 0,
          no_submit_key: Math.random(),
        }
      }, 1000)
    },
    beforeSave(form) {
      return false
    },

    // options
    handleChangeOptions() {
      // eslint-disable-next-line
      console.log(this.selectValue)
    },

    // store
    handleChangeProduct() {
      // eslint-disable-next-line
      console.log(this.selectProduct)
    },

    // lazyload
    handleChangeLazy() {
      // eslint-disable-next-line
      console.log(this.selectLazy)
    },
    lazyLoad(node, resolve) {
      const { level, root, value } = node

      const id = root ? '100000000000' : value
      const le = level + 1
      const url = `/industrial/category/categoryByList/?id=${id}&level=${le}`

      this.$http
        .get(url)
        .then(res => {
          const data = res.data || []
          for (const d of data) {
            d.leaf = !(d.nextCategory && d.nextCategory.length)
          }
          resolve(data)
        })
        .catch(() => resolve([]))
    },
    handleLazy() {
      this.selectLazy = ['101300000000', '101301000000']
    },

    // select-product-cates
    handleSelect(value, labels) {
      this.productLabels = labels
    },
    handleProductChange() {
      this.product = '100701001000'
      this.$nextTick(() => {
        this.productLabels = this.$refs.product.getLabels()
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
